<template>
  <tui-modal :title="info?images[info].title:''" :show="show" :button="button" @click="close">
    <view class="flex-row flex-center">
      <image v-if="info" class="img-exp" :src="`https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/${images[info].img}.png`" />
      <view class="img-require flex-column justify-between">
        <view v-for="(val,key) in requires" :key="key">
          <image class="img-icon" src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/icon-circle.png" />
          <text class="text-24 color-t2">{{ val }}</text>
        </view>
      </view>
    </view>
  </tui-modal>
</template>
<script>
export default {
  name: 'ExampleImage',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    info: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      requires: ['四角完整', '照片清晰', '无反光'],
      images: {
        licence1: {
          title: '驾驶证上传示例',
          img: 'sl_jsz'
        },
        certification: {
          title: '从业资格证上传示例',
          img: 'sl_syzgz'
        },
        vlicencePicture: {
          title: '行驶证上传示例',
          img: 'sl_xsz'
        },
        bizPicture: {
          title: '道路运输证上传示例',
          img: 'sl_dlysz'
        },
		thirdYearNotMajorAccidentCert: {
		  title: '三年无重大事故责任证明',
		  img: 'sl_dlthree'
		}
      },
      button: [
        { text: '知道了' }
      ]
    }
  },
  methods: {
    close() {
      this.$emit('update:show', false)
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="scss">
.img-exp{
  width:250rpx;
  height:167rpx;
  margin-right:34rpx;
}
.img-require{
  height:167rpx;
}
.img-icon{
  width:22rpx;
  height:22rpx;
  margin-right:13rpx;
}
</style>
